<template>
  <div class="sq-right-top d-flex-c p-b-tiny overflow-hidden">
    <div class="panel-header-bg flex-between flex-0">
      <div class="title-text">
        水情信息
      </div>
      <span class="c-text-blue f-12">今日以来</span>
    </div>
    <div class="panel-zone-big-bg right-top d-flex-c flex-1 overflow-hidden">
      <div
        class="flex-between m-b-mini flex-box-height"
      >
        <ReservoirOverview class="flex-0 full-height m-r-mini" />
        <ChannelVariation class="flex-1 full-height" />
      </div>
      <div class="panel-zone-bg flex-bottom-height">
        <WaterLevelChart
          :chart-data="chartData"
        />
      </div>
    </div>
  </div>
</template>

<script>
import WaterLevelChart from '@/views/business/ysqjcdp/components/business/water-level-chart.vue'
import ReservoirOverview from '@/views/business/ysqjcdp/components/business/reservoir-overview.vue'
import ChannelVariation from '@/views/business/ysqjcdp/components/business/channel-variation.vue'

export default {
  name: 'SqRightTop',
  components: { WaterLevelChart, ReservoirOverview, ChannelVariation },
  data () {
    return {

      chartData: [
        {
          time: '06:00',
          lszg: 12,
          ll: 14,
          sw: 20
        },
        {
          time: '12:00',
          lszg: 10,
          ll: 20,
          sw: 24
        },
        {
          time: '18:00',
          lszg: 8,
          ll: 30,
          sw: 29
        },
        {
          time: '00:00',
          lszg: 8,
          ll: 30,
          sw: 29
        },
        {
          time: '08:00',
          lszg: 20,
          ll: 30,
          sw: 28
        }
      ]
    }
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.flex-box-height {
  min-height: 210px;
  max-height: 270px;
  flex-grow: 3; /* 增加放大优先级 */
  flex-shrink: 3;
}

.flex-bottom-height {
  flex-grow: 2; /* 增加放大优先级 */
  flex-shrink: 2;
  min-height: 228px;
  // max-height: 250px;
}

</style>
